<template>
  <transition name="fade" mode="out-in">
    <div class="divided">
      <van-nav-bar
        title="分成管理"
        left-arrow
        :right-text="rightText"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <van-search
        v-model="search"
        v-if="!isSet"
        placeholder="搜索业务员姓名、手机或推荐码"
        @search="onSearch"
      >
      </van-search>

      <div :style="dividedListStyle">
        <van-row
          class="divided-list-title"
        >
          <van-col span="8">业务员</van-col>
          <van-col span="8">二级比例</van-col>
          <van-col span="8">我的比例</van-col>
        </van-row>
        <van-list
          v-if="!isNoData"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            @click="toggleCheckbox(index)"
          >
            <van-row
              class="divided-list-item"
            >
              <!-- 初始表格数据 -->
              <template v-if="!isSet">
                <van-col span="8">{{ item.name }}</van-col>
                <van-col span="8">{{ item.persentF }}</van-col>
                <van-col span="8">{{ item.persentS }}</van-col>
              </template>

              <!-- 点击设置比例后的数据 -->
              <template v-else>
                <div class="divided-list-checkbox">
                  <van-checkbox v-model="item.checked" :name="item.name" ref="checkboxes" checked-color="#FB999A"></van-checkbox>
                </div>
                <van-col span="8">{{ item.name }}</van-col>
                <van-col span="8">{{ item.persentF }}</van-col>
                <van-col span="8">{{ item.persentS }}</van-col>
              </template>
            </van-row>
          </div>
        </van-list>

        <div class="no-data" v-else>
          <img src="@/assets/blank_illustrations2.png">
          没有更多数据T T...
        </div>
      </div>

      <div class="divided-submitbar" v-if="isSet">
        <van-checkbox v-model="checkedAll" class="divided-submit-check" checked-color="#FB999A">
          <div>
            <p style="font-size: 14px;line-height: 20px;">全选</p>
            <p class="txt-detail">请选择需要设置比例的业务员，支持多选</p>
          </div>
        </van-checkbox>
        <van-button 
          slot="button"
          type="default" 
          class="divided-submit-btn"
          @click="clickNext"
        >下一步</van-button>
      </div>

      <!-- 点击下一步弹框 -->
      <van-dialog
        v-model="showNextDialog"
        show-cancel-button
        :before-close="beforeClose"
        class="dialog"
      >
        <div class="dialog-content">
          <p class="dialog-title">
            设置比例
          </p>
          <img src="@/assets/icon_instructions.png" class="dialog-title-tip" @click="clickShowTip">
          <van-field
            v-model.number="form.secondPersent"
            type="number"
            placeholder="二级分成比例(输入整数)"
            class="field-persent"
          >
            <img src="@/assets/persent.png" slot="icon" style="width: 15px;">
          </van-field>
          <!-- icon="@/assets/logo.png" -->
          <van-field
            v-model.number="form.firstPersent"
            type="number"
            placeholder="我的分成比例(输入整数)"
            class="field-persent"
          >
            <img src="@/assets/persent.png" slot="icon" style="width: 15px;">
          </van-field>
        </div>
      </van-dialog>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Icon, Search, List, Cell, CellGroup, Row, Col, Checkbox, CheckboxGroup, Field, Dialog } from 'vant'
export default {
  // 刷新当前页面
  inject: ['reload'],
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Search.name]: Search,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
  },
  data () {
    return {
      showNextDialog: false,
      isNoData: false,
      rightText: '设置比例',
      dividedListStyle: {
        padding: '0 29px 0 39px'
      },
      isSet: false,
      search: '',
      list: [],
      loading: false,
      finished: false,
      form: {
        secondPersent: '',
        firstPersent: ''
      }
    }
  },
  mounted() {

  },
  computed: {
    checkedAll: {
      get: function () {
        for(let item of this.list) {
          if(item.checked == false) {
            return false
          }
        }
        return true
      },
      // setter
      set: function (newValue) {
        // 点击全选后  list.checked改变
        for(let item of this.list) {
          item.checked = newValue
        }
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      // 点击设置比例
      this.isSet = !this.isSet
      if(this.isSet) {
        this.rightText = '取消'
        this.dividedListStyle = {
          padding: '0 33px 44px 60px'
        }
      } else {
        this.rightText = '设置比例'
        this.dividedListStyle = {
          padding: '0 29px 0 39px'
        }
      }
    },
    onSearch() {

    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push({
            name: '彭刚',
            persentF: '68%',
            persentS: '28%',
            checked: false
          });
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    toggleCheckbox(index) {
      if(this.isSet) {
        // 得到选中的数据
        console.log(this.list[index])
        this.$refs.checkboxes[index].toggle()
      }
    },
    clickNext() {
      // 点击下一步
      this.showNextDialog = true
    },
    beforeClose(action, done) {
      // 点击确定
      if (action === 'confirm') {
        setTimeout(() => {
          // 刷新当前页面
          this.reload()
          done()
        }, 1000)
      } else {
        done()
      }
    },
    clickShowTip() {
      Dialog.alert({
        title: '关于分成比例',
        message: '<p>分成计算公式为</p><p>.....</p>'
      }).then(() => {
        // on close
      });
    }
  },
}
</script>

<style scoped>
.divided {
  height: 100vh;
  overflow: auto;
  background-color: #fff;
  color: #38393A;
}
.divided-list-title {
  text-align: center;
  line-height: 44px;
  border-bottom: 1px solid #E5E5E5;
  font-weight: bold;
  font-size: 16px;
}
.divided-list-item {
  position: relative;
  text-align: center;
  line-height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #E5E5E5;
  font-size: 14px;
}
.divided-list-checkbox {
  position: absolute;
  left: -44px;
}
.divided-submitbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 49px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(207, 207, 207, 0.3);
}
.divided-submit-btn {
  color: #fff;
  background-color: #FB999A;
  width: 105px;
  height: 49px;
}
.divided-submit-check {
  margin-left: 10px;
  display: flex;
  align-items: center;
  /* height: 49px; */
  flex-direction: row;
}
.txt-detail {
  font-size: 12px;
  font-size:10.8px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.90);
  line-height: 16px;
  color: rgb(153, 153, 153);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  color:#999999;
}
.dialog {
  border-radius: 8px;
}
.dialog-content {
  padding: 14px 22px;
}
.dialog-title {
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  margin-bottom: 25px;
}
.field-persent {
  border-bottom: 1px solid #E8EAEF;
}
.dialog-title-tip {
  width: 15px;
  position: absolute;
  top: 16px;
  right: 16px;
}
.no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 150px);
  color: #999999;
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
}
.no-data img {
  margin-bottom: 16px; 
  width: 252px;
}
</style>
